<script setup lang="ts">
import { Icon } from '@iconify/vue';

// 解决方案数据
const solutionItems = [
  { icon: 'mdi:bank', title: '房贷服务', description: '为购房客户提供一站式的贷款服务，包括方案设计、申请提交和贷后管理' },
  { icon: 'mdi:business', title: '企业融资', description: '帮助企业客户获取业务发展所需的资金支持，提供全流程的融资顾问服务' },
  { icon: 'mdi:car', title: '车贷服务', description: '为购车用户提供快速便捷的贷款服务，简化申请流程，提高审批效率' },
  { icon: 'mdi:account-cash', title: '个人信贷', description: '根据个人需求设计定制化的信贷方案，提供专业财务规划建议' }
];
</script>
<template>
  <div class="platforms bg-hoverColor py-lg-16 py-5 mt-sm-16 mt-10" id="solutions">
    <v-container>
      <div class="maxWidth">
        <v-row class="justify-center">
          <v-col cols="12" sm="8">
            <h2 class="sectionTitle text-center pt-sm-8 pt-8 font-weight-bold">
              GuaClass 专业解决方案，提速贷款流程，高效应对多种金融需求
            </h2>
          </v-col>
        </v-row>

        <v-row class="mt-10">
          <v-col v-for="(item, index) in solutionItems" :key="index" cols="12" md="6" lg="3" class="mb-6">
            <v-card elevation="4" class="pa-6 h-100 d-flex flex-column">
              <div class="d-flex justify-center mb-4">
                <v-avatar color="primary" size="64" class="d-flex align-center justify-center">
                  <Icon :icon="item.icon" color="white" size="36" />
                </v-avatar>
              </div>
              <h3 class="text-h5 font-weight-bold text-center mb-4">{{ item.title }}</h3>
              <p class="text-body-1 text-center mb-0">{{ item.description }}</p>
            </v-card>
          </v-col>
        </v-row>
      </div>
    </v-container>
    <div class="pb-16">
      <div class="d-flex flex-row mt-sm-8 mt-5 overflow-hidden">
        <div class="slider-group">
          <img src="@/assets/images/landingpage/background/slider-group.png" />
        </div>
        <div class="slider-group">
          <img src="@/assets/images/landingpage/background/slider-group.png" />
        </div>
      </div>
    </div>
  </div>
</template>
